<!-- 出库申请编辑 -->
<template>
  <view class="outboundApplicationEditor">
    <view class="edit-details f32">
      <view class="title f28 fwbold"> 编辑详情 </view>
      <van-cell-group>
        <my-picker
          :form="addForm"
          name="code_name"
          @click-input="changeName"
          :columns="catarrList"
          value-key="name"
          clearable
          label="分类:"
          placeholder="请选择分类"
        ></my-picker>
        <my-picker
          :form="addForm"
          name="goods_name"
          @click-input="changeGoodsList"
          :columns="goods_list"
          value-key="goods_name"
          label="商品:"
          placeholder="请选择商品"
        ></my-picker> 
        <van-field
          :value="addForm.use_type_name"
          name="use_type_name"
          data-name="use_type_name"
          @click-input="pickerShow"
          label="使用类型"
          placeholder="请选择使用类型"
          is-link
          readonly
        ></van-field>
        <van-field
          :value="addForm.unit_name"
          name="unit_name"
          data-name="unit_name"
          @input="changeAddFormData"
          clearable
          label="单位"
          disabled
        ></van-field>
        <van-field
          :value="addForm.goodssnstock"
          name="goodssnstock"
          data-name="goodssnstock"
          @input="changeAddFormData"
          clearable
          label="库存"
          disabled
        ></van-field>
        <van-input
          v-model="addForm.goods_num"
          name="goods_num"
          data-name="goods_num"
          @testnum="changeGoodsNum"
          label="数量"
          placeholder="请填写数量"
        ></van-input>
        <van-field
          :value="addForm.goods_all_price"
          name="goods_all_price"
          @input="changeAddFormData"
          clearable
          label="金额"
          disabled
        ></van-field>
      </van-cell-group>
      <view class="btn-style">
        <van-button color="#999999" type="info" @click="reset">重置</van-button>
        <van-button color="#62B158" type="info" @click="okEdit" >确认修改</van-button>
      </view>
    </view>

    <van-popup :show="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="standingList"
        :value-key="value"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      ></van-picker>
    </van-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        unit_name: "", //单位
        usetype: "", // 使用身份id
        unit_name: "", //单位
        goodssnstock: "", //库存
        goods_num: "", //数量
        goodssnstock: "", //金额
        cat_code: "", //分类id
        goods_sn: "", //商品id
      },
      form: {},
      index: -1,
      catarrList: [], //分类
      cat_id: "", //分类的id
      goods_list: [], //品名
      goods_sn: "", //品名id
      standingList: ["学生", "老师"],
      showPicker: false,
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {
    console.log(this.detailData)
    this.outbound_type = options.outbound_type; //订单类型
    this.addForm = Object.assign({}, this.detailData); //深拷贝
    this.index = options.index;
    this.getZixuaneditdetail();
    this.getOutGetgoods(this.detailData.cat_code || this.detailData.catarr);
  },
  methods: {
    /*获取分类*/ 
    async getZixuaneditdetail() {
      if (this.outbound_type) {
        let res = await this.$ajax.outZixuandetail({
          outbound_type: this.outbound_type,
        });
        if (res.code == 1) {
          this.catarrList = res.data.cat_arr;
        }
      }
    },
    /*确认修改*/ 
    okEdit() {
      this.setDetailData({
        ...this.detailData,
        ...this.addForm,
      });
      wx.navigateBack();
    },
    /*重置*/ 
    reset() {
      this.addForm = {};
    },
    /*使用类型*/ 
    pickerShow() {
      this.showPicker = true;
    },
    onConfirm(event) {
      const { picker, value, index } = event.detail;
      this.addForm.use_type_name = value;
      this.showPicker = false;
      this.addForm.usetype = index;
      this.$set(this.addForm, "unit_name", ""); //单位
      this.$set(this.addForm, "goodssnstock", ""); //库存
      this.$set(this.addForm, "goods_num", ""); //数量
      this.$set(this.addForm, "goodssnstock", "");
      this.getUnit(); //单位，库存
    },

    /*通用方法*/ 
    changeAddFormData(event) {
      const key = event.target.dataset.name;
      this.addForm[key] = event.detail;
    },
    /*分类*/ 
    changeName(key, value) {
      this.$set(this.addForm, "cat_code", value["code"]); // // 对应的id 提交给后台的
      this.$set(this.addForm, [key], value["name"]); //对应显示的名称
      this.cat_id = this.addForm.cat_code; //id
      this.getOutGetgoods(this.cat_id , this.outbound_type); //商品接口

      //   当分类每次修改时 要清空 商品 + 使用类型 + 单位 + 库存 + 数量 + 金额
      this.$set(this.addForm, "goods_name", ""); //商品
      this.$set(this.addForm, "use_type_name", ""); //使用类型
      this.$set(this.addForm, "unit_name", ""); //单位
      this.$set(this.addForm, "goodssnstock", ""); //库存
      this.$set(this.addForm, "goods_num", ""); //数量
      this.$set(this.addForm, "goods_all_price", "");
    },

    /*商品数据（弹框）*/ 
    async getOutGetgoods(cat_id,outbound_type) {
      let res = await this.$ajax.outGetgoods({
        cat_id: cat_id,
        outbound_type:outbound_type
      });
      if (res.code == 1) {
        this.goods_list = res.data;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*商品（品名）下拉选择数据*/ 
    changeGoodsList(key, value) {
      this.$set(this.addForm, "goods_sn", value["goods_sn"]); // 对应的id 提交给后台的
      this.$set(this.addForm, [key], value["goods_name"]);
      this.goods_sn = this.addForm.good_sn; //商品（选择的）ID
      //   当商品每次修改时 要清空下面关联的数据信息
      this.$set(this.addForm, "use_type_name", ""); //使用类型
      this.$set(this.addForm, "unit_name", ""); //单位
      this.$set(this.addForm, "goodssnstock", ""); //库存
      this.$set(this.addForm, "goods_num", ""); //数量
      this.$set(this.addForm, "goods_all_price", "");
    },

    /*单位，库存*/ 
    async getUnit() {
      let res = await this.$ajax.outGetunit({
        goods_sn: this.addForm.goods_sn,
        usetype: this.addForm.usetype,
      });
      if (res.code == 1) {
        if (res.data == null) {
          this.$set(this.addForm, "unit_name", res.data);
        } else {
          this.$set(this.addForm, "unit_name", res.data);
        }
        this.$set(this.addForm, "goodssnstock", res.stock); //库存
        this.$set(this.addForm, "goods_all_price", "");
        // this.$set(this.addForm, "goodssnstock", "0.00"); // 价格清零
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },

    /*数量*/ 
    async changeGoodsNum() {
      if (this.addForm.goods_num) {
        // 输入的数量 如果大于 库存数量  提示大于库存重量  并且清空输入的数量
        // 如果小于 这正常计算金额信息（调接口）
        if (this.addForm.goods_num * 1 > this.addForm.goodssnstock * 1) {
          // this.addForm.goods_num = this.addForm.goodssnstock;
          this.$set(this.addForm, "goods_num", this.addForm.goodssnstock);
          uni.showToast({
            icon: "none",
            title: "出库数量不能大于库存量",
            duration: 1000,
          });
        }
        let res = await this.$ajax.outGetunit({
          goods_sn: this.addForm.goods_sn,
          usetype: this.addForm.usetype,
          goods_num: this.addForm.goods_num,
        });
        if (res.code == 1) {
          // this.addForm.goodssnstock = res.shop_price;
          this.$set(this.addForm, "shop_price", res.shop_price);
          this.$set(this.addForm, "goods_all_price", res.shop_price);
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "请输入数量",
          duration: 1000,
        });
      }
    },
  },

  mounted() {},

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "出库申请-编辑",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss">
.outboundApplicationEditor {
  width: 100%;
  height: 100vh;
  max-height: 100%;
  background: rgba(249, 249, 249, 1);

  .edit-details {
    line-height: 46rpx;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    // font-size: 32rpx;
    font-family: Arial;
    padding: 20rpx 20rpx;

    .title {
      color: rgba(16, 16, 16, 1);
      // font-size: 28rpx;
      text-align: left;
      font-family: SourceHanSansSC-medium;
      // font-weight: bold;
    }

    .btn-style {
      display: flex;
      justify-content: space-evenly;
      margin-top: 120rpx;
      margin-bottom: 64rpx;

      .van-button {
        width: 200rpx;
        height: 72rpx;
        border-radius: 8rpx;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        text-align: center;
        font-family: Microsoft Yahei;
      }
    }
  }
}
</style>